@charset "utf-8";

/* 引用的样式 */
#home{
  padding:30px;
  background: #fff;
}
#home p{
  padding: 0 10px;
  border-bottom: 1px dashed silver;
  margin-bottom: 10px;
}
.text-box{
  width:300px;
  height:300px;
  padding:10px;
  font-size:12px;
  margin-right:10px;
  margin-bottom:10px;
  font-size: 30px;
  color:#000;
  background: #ffffcc
}
.border-color{
  height:44px;
  border: 10px solid;
  -webkit-border-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc;
}
.border-image{
  -webkit-border-image: url(../images/1.jpg) 0 12 0 12 stretch stretch;
  height:44px;
}
.border-radius{
  -webkit-border-radius:5px;
  background: #ff9999
}
.box-shadow{
  -webkit-box-shadow: 4px 4px 4px #000;
  border: 1px solid silver;
  background: #ffffcc
}
.background-origin{
  -webkit-background-origin:padding;
  border:20px dashed #000;
  padding:20px;
  background:#ccc url(../images/1.jpg);
}
.background-clip{
  background: rgb(204, 204, 204) url(../images/1.jpg) no-repeat scroll 0% 0%;
  -webkit-background-clip: padding;
  -webkit-background-origin: padding;
  border: 20px dotted rgb(102, 102, 102);
}
.background-size{
  background:url(../images/1.jpg) no-repeat ;
  -webkit-background-size: 100% 100%;
}
.Multiple{
  background-image: url(../images/1.jpg), url(../images/2.png);
  background-position: left top, right top;
  background-repeat: no-repeat, no-repeat, repeat-y;
}
.HSL{
  background-color: hsl(240,100%,50%);
}
.HSLA{
  background-color: hsla(0,100%,50%,0.2)
}
.opacity{
  opacity:0.5;
  background: #000
}
.RGBA{
  background-color: rgba(0,0,0,0.5)
}
.text-shadow{
  text-shadow:5px 2px 6px #000;
  font-size: 24px;
}
.text-overflow{
  text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
}
.word-wrap {
  word-wrap:break-word;
}
.resize{
  resize:both;overflow: auto;
  border: 1px solid #000
}
.outline{
  outline-color:#897048;outline-style:groove;outline-width:2px;outline-offset: 2px
}
.content{
  overflow:hidden;
}
.content:before{
  content:"支持content";
}
.columns{
  -webkit-columns:10px 3;
  -webkit-column-rule:1px dashed #DCDCDC;
}
.supported{
  color:green;
}
.not-supported{
  color:red;
}
.Rotate{
  -webkit-transform: rotate(-90deg);
}
.scale{
  -webkit-transform: scale(2);
  width: 150px;
  height: 150px;
}
.translate{
  -webkit-transform: translate(10px, 20px);
}
.matrix{
  -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
}
.transition.hov{
  background-color:blue;
  -webkit-transition-property:background-color;
  -o-transition-property:background-color;
  /* 让它持续两秒钟*/
  -webkit-transition-duration:2s;
  -o-transition-duration:2s;
}
.Animation{
  -webkit-transform-style: preserve-3d;
	/*让整个行使用x-轴旋转、7秒中的动画、无限次播放以及线性 */
	-webkit-animation-name: x-spin;
	-webkit-animation-duration: 7s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}
@-webkit-keyframes x-spin {
	0% { -webkit-transform: rotateX(0deg); }
	50% { -webkit-transform: rotateX(180deg); }
	100% { -webkit-transform: rotateX(360deg); }
}
.reflection{
  -webkit-box-reflect: right 1px
    -webkit-gradient(linear, left top, right top, from(transparent), color-stop(0.4, transparent), to(white));
}
@font-face {font-family: 'hakuyoxingshu7000Regular';src: url('http://www.blueidea.com/articleimg/2009/12/7263/7000.eot');src: local('hakuyoxingshu7000 Regular'), local('hakuyoxingshu7000'), url('http://www.blueidea.com/articleimg/2009/12/7263/7000.ttf') format('truetype'), url('http://www.blueidea.com/articleimg/2009/12/7263/7000.svg#hakuyoxingshu7000') format('svg');}
.font-face{
  font-family:hakuyoxingshu7000Regular;
}
.easy-fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: linear; /*线性动画*/
	-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes fade{
  0%{
    opacity:1
  }
  100%{
    opacity:0.01
  }
}